<template>
  <el-main :class="{ 'micro-app': isMicroApp }">
    <div class="main-content">
      <router-view></router-view>
    </div>
  </el-main>
</template>

<script setup lang="ts" name="Main">
import { computed } from 'vue';

// 检测是否在微前端环境中运行
const isMicroApp = computed(() => {
  // 方法1: 检查是否存在微前端相关的全局变量
  return !!(window as any).__MICRO_APP_ENVIRONMENT__ || 
         !!(window as any).microApp || 
         // 方法2: 检查URL参数或其他标识
         window.location.search.includes('micro=true') ||
         // 方法3: 检查父窗口
         window.parent !== window;
});
</script>

<style scoped lang="scss">
.el-main {
  background-color: #edf0f4 !important;
  padding: 12px;
  height: calc(100vh - 48px);
  overflow: auto;
  
  // 微前端环境下的样式
  &.micro-app {
    padding: 0;
  }
}

.main-content {
  height: 100%;
  background-color: #fff;
  display: flex;
  flex-direction: column;
}
</style>
